<template>
  <div>
    <van-nav-bar title="培训报名" @click-left="$router.go(-1)" left-arrow />
    <register-form
      ref="registerForm"
      v-if="isRegisterIsShow"
      :userMessage="userMessage"
      :register-params="registerParams"
      @handleRegister="handleRegister"
    ></register-form>
    <van-form v-else @submit="onSubmit">
      <van-field
                    :value="cardType"
                    :rules="[{ required: true, message: '请选择证件类型' }]"
                    name="card_type"
                    is-link
                    readonly
                    label="证件类型"
                    placeholder="请选择证件类型"
                    @click="cardTypeIsShow = true"
            />
            <van-popup v-model="cardTypeIsShow" round position="bottom">
                <van-picker show-toolbar value-key="name" @confirm="onConfirmCardType" @cancel="cardTypeIsShow = false" :columns="cardOptions"/>
            </van-popup>
      <van-field
        v-model="personForm.card_id"
        name="card_id"
        label="证件号码"
        placeholder="证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"
      />
      <password-captcha ref="captcha" @getCaptcha="getCaptcha"></password-captcha>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { firstsign,getPersonVerifyUrl,getPersonUserInfo} from "../../../../request/api";
import registerForm from "../components/registerForm";
import PasswordCaptcha from "../../../../components/TencentCaptcha/passwordCaptcha.vue"
export default {
  name: "index",
  data() {
    return {
      userMessage:null,
      registerParams: [],
      isRegisterIsShow: false,
      personForm:{
        card_type: "",
        card_id: "",
      },
      
      cardTypeIsShow:false,
      cardOptions: [{id: '0', name: '居民身份证'}, {id: '1', name: '护照'}, {id: 'B', name: '港澳居民通行证'}, {id: 'C', name: '台湾居民通行证'}],
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
      getCaptcha(captcha){
      console.log('传递验证码参数对象',captcha)

      this.getPersonVerify(captcha);
    },
      //实名认证
    getPersonVerify(captcha) {
      let params = {
        cert_type: this.personForm.card_type,
        openid: this.personForm.card_id,
        captcha: captcha
      };
      getPersonVerifyUrl(params).then((res) => {
        console.log("实名认证", res);
        let { transactionNo, url } = res;
        this.$cookies.set('open_id',this.personForm.card_id);
        this.$cookies.set('transactionNo', transactionNo);
        location.href = url;
      });
    },
    //获取用户信息
    getUserInfo() {
      console.log('获取用户信息');
      if(this.$route.query.personName){
        let params = {
          openid:this.$cookies.get("open_id"),
          verified_serialno:this.$cookies.get("transactionNo")
        }
        getPersonUserInfo(params).then(res =>{
          console.log('用户信息',res)
          this.userMessage = res;
          if(this.$cookies.get("open_id") == this.userMessage.person.idCard){
            this.isRegisterIsShow = true
          }else{
            this.$router.push('/user/register');
            this.$message({
              type:"error",
              message:"证件类型或证件号码错误"
            })
          }
        })
      }
    },
      onConfirmCardType(value, index) {
                console.log(`当前值${value.id}`);
                this.personForm.card_type = value.id;
                this.cardTypeIsShow = false
            },
    onSubmit(values) {
      for(let item of this.cardOptions){
          if(item.name == values['card_type']){
              this.personForm.card_type = item.id
          }
      }
      this.$refs.captcha.show();
    },
    //首次报名
    handleRegister(params) {
      firstsign(params)
        .then((res) => {
          this.$cookies.set("token", res.token);
          this.$store.commit("setToken", res.token);
          console.log(res);
          this.$message({
            type: "success",
            message: "报名成功",
          });
          this.$router.push("/user/index");
        })
        .catch((err) => {
          this.isShow = false;
          this.$refs.registerForm.flag = false;
          console.log(err);
          this.$message({
            type: "error",
            message: err.msg,
          });
        });
    },
  },
  computed:{
      cardType(){
                let cardTypeName = '';
                for (let item of this.cardOptions){
                    if(item.id == this.personForm.card_type){
                        cardTypeName = item.name
                    }
                }
                return cardTypeName;
            }
  },
  components: {
    registerForm,
    PasswordCaptcha
  },
};
</script>

<style scoped>
</style>
